import React, { Component } from "react";
import "./index.css";

export default class Parent extends Component {
    render() {
        return (
            <div className="parent">
                <h3>我是Parent组件</h3>
                {/* 使用名称为render的特定props指定A组件中的内容（即Vue中的slot），此时还可以携带由A组件传递的参数 */}
                <A render={(name) => <B name={name} />} />
            </div>
        );
    }
}

class A extends Component {
    state = { name: "Tom" };

    render() {
        const { name } = this.state;
        return (
            <div className="a">
                <h3>我是A组件</h3>
                {this.props.render(name)}
            </div>
        );
    }
}

class B extends Component {
    render() {
        return (
            <div className="b">
                <h3>我是B组件，{this.props.name}</h3>
            </div>
        );
    }
}
